<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>同城活动</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
		<style>
			body {
				font-family: "Microsoft YaHei", sans-serif;
				min-height: 100vh;
				background: #fff;
				overflow-x: hidden;
			}
			
			.header {
				background: #43ac45;
				z-index: 100000;
			}
			
			.header h1 {
				color: #fff;
				font-size: 18px;
			}
			
			.header a {
				color: #fff;
			}
			
			a:active {
				color: #333;
			}
			
			ul li {
				list-style-type: none;
			}
			
			.section {
				margin-top: 44px;
			}
			
			.section .sel_list {
				height: 46px;
				line-height: 46px;
				width: 100%;
				text-align: center;
				margin: 0;
				padding: 0;
				/*border-bottom:1px solid #f2f2f2;*/
				font-size: 15px;
			}
			
			.section .sel_list>li {
				float: left;
				width: calc(100%/3);
			}
			
			.sel_list a {
				display: inline-block;
				width: 100%;
			}
			
			.sel_list a b {
				display: inline-block;
				margin-left: 9px;
				border-color: #333 #fff #fff #fff;
				border-style: solid;
				border-width: 7px 5px 0 5px;
				height: 0;
				width: 0;
			}
			
			.content ul {
				margin: 0;
				padding: 0;
			}
			
			#main>li {
				height: 110px;
				width: 100%;
				overflow: hidden;
				padding: 22px 12px 12px;
				border-bottom: 1px solid #f2f2f2;
				position: relative;
			}
			
			.content ul li .view {
				float: left;
				width: 30%;
				height: 100%;
				position: relative;
			}
			
			.content ul li .view #end p {
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0.5;
				border-radius: 3px;
				background: #000;
				width: 100%;
				height: 100%;
			}
			
			.content ul li .view>#icon {
				position: absolute;
				top: 0;
				left: 0;
				width: 24%;
				height: 30%;
				z-index: 100;
				top: 0;
				left: 0;
				background-size: 30%;
			}
			
			#end {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 120;
			}
			
			.c0 {
				display: none;
			}
			
			.c1 {
				display: block;
			}
			
			.c2 {
				display: none;
			}
			
			.content ul li .view span {
				color: #fff;
				opacity: 0.7;
				font-size: 16px;
				display: inline-block;
				width: 100%;
				position: absolute;
				top: 30%;
				text-align: center;
				z-index: 10;
			}
			
			.content ul li .address {
				float: left;
				width: 70%;
				/*height:100%;*/
				padding-left: 3%;
				overflow: hidden;
			}
			
			.view img:first-child {
				width: 100%;
				height: 100%;
				border-radius: 3px;
				vertical-align: middle;
			}
			
			.address ul {
				height: 100%;
			}
			
			.content ul li .address ul li {
				font-size: 13px;
				color: #999;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
			
			.content ul li .address>ul>li:first-child {
				font-size: 16px;
				padding-top: 0;
				color: #333;
				/*font-size:54px;*/
			}
			
			.address ul li:last-child {
				font-size: 11px;
				text-align: right;
				float: right;
				width: 100%;
				height: 100%;
			}
			
			.active {
				border-bottom: 1px solid #ffb812;
				color: #ffb812;
			}
			
			.noactive {
				border-bottom: 1px solid #f2f2f2;
				color: #333;
			}
			/*活动类型*/
			
			.sel_list {
				position: relative;
			}
			
			#mold {
				position: absolute;
				top: 0px;
				right: 0;
				width: 100%;
				min-height: 100vh;
				z-index: 130;
				background: rgba(0, 0, 0, .4);
				text-align: left;
			}
			
			#mold p {
				margin: 0;
				background: #fff;
				padding: 0 2%;
			}
			
			#mold span {
				width: calc(79%/4);
				margin: 12px 2%;
				padding: 0;
				background: #f2f2f2;
				color: #333;
				border-radius: 3px;
				height: 37px;
				line-height: 37px;
				display: inline-block;
				font-size: 15px;
				text-align: center;
			}
			/*置顶活动*/
			
			.hot {
				display: inline-block;
				width: 21px;
				height: 21px;
				background: url("../../images/city_life/hot.png") no-repeat 0px 1px;
				background-size: 75%;
				vertical-align: middle;
			}
			/*类型*/
			
			.hide {
				display: none;
			}
			
			.visible {
				display: block;
			}
			/*小三角*/
			
			.title {
				font-size: 50px;
			}
			
			.title {
				font-size: 50px;
			}
			/*.mui-scroll-wrapper {
		    position: absolute;
		    z-index: 10000;
		    top: 0px;
		    bottom: 0;
		    left: 0;
		    overflow: hidden;
		    width: 100%;
		}
		*/
			
			#nosee {
				background: url(../../images/my/index/null.png) no-repeat 50% 55%;
				background-size: 44%;
				/*margin: 0 28%;*/
				min-height: 100vh;
				width: 100%;
				overflow-x: hidden;
			}
		</style>
	</head>

	<body>
		<div id="mold">
			<p>
				<!--<span id="1">运动</span>
           <span id="2">音乐</span>
           <span id="3">教育</span>
           <span id="4">旅游</span>
       
           <span id="5">美食</span>
           <span id="6">娱乐</span>
            <span id="7">展会</span>
            <span id="8">亲子</span>
            <span id="9">休闲</span>-->
			</p>
		</div>
		<div id="pullrefresh" class="content mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron" id='main'>

				</ul>
			</div>
		</div>

		<!--<div id="pullrefresh" class='content'>
		<div class="">
			<ul>
				1111111
			</ul>
		</div>
	</div>
	-->

		<p id="nosee" style="display: none;text-align:center;    position: absolute;z-index: 10;"></p>
		<div>

		</div>
		<script src="../../plugins/mui/mui.min.js"></script>
		<script src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
		<script src="../../js/getApiToken.js"></script>
		<script src="../../js/md5.js"></script>
		<script>
			var page_cnt = 12;
			var this_tag;
			mui.init({
				pullRefresh: {
					//上拉加载
					container: "#pullrefresh",
					up: {
						height: 50,
						auto: false,
						contentrefresh: "正在加载...",
						contentnomore: '没有更多数据了',
						callback: function pullfresh() {
							if(true) {
								myAjax('home/Activity/getTagList', 'get', {
										'tag': this_tag,
										'page_cnt': page_cnt
									},
									function(data) {
										if(data.success) {
											$('#main').html('');
											//最新===数据
											for(var i = 0; i < data.length; i++) {
												if(data.data.length != 0) {
													var up_html = s_html(data.data[i].id, data.data[i].path, data.data[i].icon, data.data[i].is_end, data.data[i].name, data.data[i].start_time, data.data[i].end_time, data.data[i].address, data.data[i].create_time, data.data[i].sort);
													$('#main').append(up_html);
												}
												//												else if (JSON.stringify(data) == '{"success":true}') {
												//													console.log('....');
												//													//没有当前类型数据
												//													if (data[i].name == undefined) {
												//														$("#nosee").css('display', 'block');
												//														$('.content ul').html('');
												//													} else {
												//														$("#nosee").css('display', 'none');
												//														$('.content ul').html(tags_html);
												//													}
												//												}

											}
											if(data.data.length < page_cnt) {
												mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
											} else {
												mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
											}
										}
									}
								)
							}
						}
					}
				}
			});
			var this_t = '最新';
			mui.plusReady(function() {
				plus.nativeUI.showWaiting();
				console.log('activity_3');
				//活动类型
				myAjax('home/Activity/getActivityList', 'get', {}, function(data) {
					if(data.success) {

						console.log(JSON.stringify(data));
						console.log(JSON.stringify(data.tags));
						console.log(data.tags.length);
						console.log('类型')
						for(var i = 0; i < data.tags.length; i++) {
							var tag_html = '<span id="' + data.tags[i].id + '">' + data.tags[i].name + '</span>';
							$('#mold p').append(tag_html);
						}

						mui('#mold').on('tap', 'p>span', function(e) {
							console.log('可以点击的');
							$("#nosee").css('display', 'none');
							var header_tag = $(this).text();
							plus.storage.setItem('tag_text', header_tag);
							$('#mold').removeClass('visible').addClass('hide');
							console.log($(this).text());
							this_tag = $(this).attr('id');
							myAjax('home/Activity/getTagList', 'get', {
									'tag': this_tag,
									'page_cnt': page_cnt
								},
								function(data) {
									if(data.success) {
										$('#main').html('');
										//最新===数据
										for(var i = 0; i < data.data.length; i++) {
											if(data.data.length != 0) {
												$("#nosee").css('display', 'none');
												var tag_html = s_html(data.data[i].id, data.data[i].path, data.data[i].icon, data.data[i].is_end, data.data[i].name, data.data[i].start_time, data.data[i].end_time, data.data[i].address, data.data[i].create_time, data.data[i].sort);
												$('#main').append(tag_html);
											} else {
												$("#nosee").css('display', 'block');
											}
										}
										//长度为0
										if(data.data.length == 0) {
											$("#nosee").css('display', 'block');
										} else {
											$("#nosee").css('display', 'none');
										}
										if(data.data.length < page_cnt) {
											mui('#pullrefresh').pullRefresh().disablePullupToRefresh();
										}
									}
								}
							)

							//进入下一页
							$('#pullrefresh').on('tap', '.li', function(e) {
								var tag_id = $(this).attr('id');
								console.log(tag_id);
								mui.openWindow({
									url: 'activity_apply.html',
									id: tag_id,
									extra: {
										id: tag_id,
									},
									waiting: {
										autoShow: true, //自动显示等待框，默认为true
										title: '正在加载...', //等待对话框上显示的提示内容
									},
									show: {
										autoShow: true,
										aniShow: 'fade-in'
									},
									extras: {
										type: 0
									}
								})
							});
							//页面传值===activity_0
							var page = plus.webview.getWebviewById('activity_0');
							mui.fire(page, 'tag', {
								idd: $(this).text()
							});
						})
					}
				})

			})

			//页面函数
			function s_html(id, path, icon, is_end, name, start_time, end_time, address, create_time, sort) {
				//判断置顶
				if(sort == 0) {
					var c = '<li>' + create_time + '</li>'
				} else {
					var c = '<li>' + '<span class="hot">' + '</span>' + create_time + '</li>'
				}
				return '<li id="' + id + '" class="li">' +
					'<div class="view">' +
					'<img src="' + _baseUrl + path + '" alt="">' +
					'<img src="' + _baseUrl + icon + '" alt="" id="icon" style="position:absolute;left:0;top:0;">' +
					'<div id="end" class="c' + is_end + '">' +
					'<p>' + '</p>' +
					'<span>' + '已结束' + '</span>' +
					'</div>' +
					'</div>' +
					'<div class="address">' +
					'<ul>' +
					'<li>' + name + '</li>' +
					'<li>' + '时间：' + start_time + '—' + end_time + '</li>' +
					'<li>' + '地点：' + address + '</li>' +
					c +
					'</ul>' +
					'</div>' +
					'</li>';
			}

			$(function() {
				console.log('触发');
				window.addEventListener('activity', function(event) {
					if(event.detail.cls = 'this') {
						$('#mold').removeClass('hide').addClass('visible')
					}
				})
			})
		</script>
	</body>

</html>